<template>
  <div class="permission-container">
    <div class="pc-btn">
      <el-button type="primary" size="mini" @click="addPermissionTmp(1,0)">添加权限</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="name"
        label="名称"
      />
      <el-table-column
        prop="code"
        label="标识"
      />
      <el-table-column
        prop="description"
        label="描述"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="180"
      >
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="addPermissionTmp(2,row.id)">添加</el-button>
          <el-button type="text" size="small" @click="eidtPermissionTmp(row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="delPermissionTmp(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 这里就不封装 弹出框组件 -->
    <el-dialog :title="isEdit ? '编辑权限': '新增权限'" :visible.sync="showDialog" :append-to-body="true" @close="close">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="权限名称" label-width="150px" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="权限标识" label-width="150px" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="权限描述" label-width="150px" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="开启" label-width="150px">
          <el-switch
            v-model="form.enVisible"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label-width="150px">
          <!-- :loading="addLoadingBtn"防止连续点击事件 -->
          <el-button type="primary" :loading="addLoadingBtn" @click="submitForm">{{ isEdit ? '更新': '新增' }}</el-button>
          <el-button @click="close">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionListRequest, addPermissionRequest, deletePermissionRequest, getPermissionDetailRequest, updatePermissionRequest } from '@/api/permission'
import { transformListToTree } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      // 防止连续点击事件
      addLoadingBtn: false,
      tableData: [],
      showDialog: false,
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: 0,
        // 页面权限 1 按钮权限 2 ---- 用户按得什么按钮，就手动把这个是改成1和2
        pid: null,
        type: null
      },
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      },
      isEdit: false
    }
  },
  // 渲染页面
  created() {
    this.getPermissionList()
  },
  methods: {
    // 颜色的行
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 4) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 渲染页面接口
    async getPermissionList() {
      const res = await getPermissionListRequest()
      // 递归树桩函数
      this.tableData = transformListToTree(res.data, 0)
    },
    // 添加事件
    addPermissionTmp(type, id) {
      // 判断是编辑还是添加
      this.isEdit = false
      // 打开弹窗
      this.showDialog = true
      // 判断是添加页面权限还是添加按钮权限
      this.form.type = type
      this.form.pid = id
    },
    // 编辑
    async eidtPermissionTmp(id) {
      // isEdit为true就是打开编辑
      this.isEdit = true
      // 打开弹窗
      this.showDialog = true
      // 请求查看
      const res = await getPermissionDetailRequest(id)
      // 数据回显
      this.form = res.data
    },
    // 关闭弹窗后的一些操作
    close() {
      // 编辑之后会出现一些新的数据,这行是让数据恢复
      this.form = this.$options.data().form
      // 关闭弹窗
      this.showDialog = false
      // 清空表单
      this.$refs.ruleForm.resetFields()
      // 关闭编辑弹窗后改为false
      this.isEdit = false
    },
    // 新增和编辑都会执行这个函数
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        try {
          if (valid) {
            // 开启防止连续点击事件
            this.addLoadingBtn = true
            // 所有校验通过以后，执行的代码
            if (this.isEdit) {
              await updatePermissionRequest(this.form)
            } else {
              await addPermissionRequest(this.form)
            }
            // 请求完成后关闭防止连续点击事件
            this.addLoadingBtn = false
            // 新增成功以后： 关闭弹窗(情况校验和数据) + 友好提示 + 刷新页面
            this.close()
            this.$message.success({ message: '新增权限成功' })
            this.getPermissionList()
          }
        } catch {
          // 请求失败后关闭防止连续点击事件
          this.addLoadingBtn = false
        }
      })
    },
    // 删除
    delPermissionTmp(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deletePermissionRequest(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getPermissionList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<style lang="scss" scoped>
.permission-container{
  margin: 20px;
  .pc-btn {
    margin-bottom: 20px;
  }
}
</style>
